<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import Mobile from './components/mobile.vue'
  import Password from './components/password.vue'

  //登陆方式
  const tabList = [
    { title: '账号登陆', tabTitle: '手机号登陆' },
    { title: '手机号登陆', tabTitle: '账号登陆' },
  ]
  const tabIndex = ref(0)
  const tabMate = computed(() => {
    return tabList[tabIndex.value]
  })
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMate.title }}</view>
      <view class="type">
        <text @click="tabIndex = tabIndex ? 0 : 1">{{ tabMate.tabTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <Mobile v-if="tabIndex === 1" />
    <Password v-else />
  </view>
</template>

<style scoped>
  @import './login.scss';
</style>
